<template>
    <div class="azm-bar-graph-components">
        <view class="flex flex-sub azm-item" v-for="(item,index) in barGraphList" :key="index">
            <view class="azm-bg-left azm-ellipsis--l1" >
                <text>{{item.name || ''}}</text>
            </view>
            <view class="flex-sub azm-bg-center">
                <view class="bg-blue azm-bgc-box" :style="{width:item.progress + '%'}"  >
                    <view class="azm-bgc-txt">{{item.num | ic_number_filter}}</view>
                </view>
            </view>
            <view class="azm-bg-right"></view>
        </view>
    </div>
</template>

<script>
    export default {
        name: "tl-bar-graph",
        components: {},
        props: {
            // 数据列表
            dataList: {
                type: Array,
                default: () => []
            },
        },
        data () {
            return {
                barGraphList: []
            }
        },
        watch: {
            dataList: {
                handler (newVal, oldVal) {
                    Array.isArray(newVal) && this.initData()
                },
                deep: true
            },
            // dataList (newVal, oldVal) {
            //     Array.isArray(newVal) && newVal.length > 0 && this.initData()
            // }
        },
        mounted () {
            Array.isArray(this.dataList) && this.initData()
        },
        methods: {
            initData () {
                let max = 0
                if (Array.isArray(this.dataList) && this.dataList.length > 0) {
                    max = this.dataList[0].num;
                }

                const dataList = this.dataList.map(value => {
                    if (max < value.num) max = value.num;
                    const data = {
                        ...value,
                        maxFun: function (num) {
                            data.progress = num / max * 100
                        },
                        progress: 0
                    }
                    return data;
                })

                this.barGraphList = dataList.sort((a, b) => {
                    a.maxFun && a.maxFun(a.num)
                    b.maxFun && b.maxFun(b.num)
                    return b.num - a.num
                })
                console.log(dataList, 'sort', this.barGraphList);
            },

        }
    }
</script>

<style scoped lang="scss">
    .azm-bar-graph-components {
        .azm-item:not(:last-child) {
            margin-bottom: 12*2upx;
            font-size: 11*2upx;
            height: 14*2upx;
        }

        .azm-bg-left {
            width: 94*2upx;
            text-align: right;
            margin-right: 16*2upx;
			 height: 14*2upx;
			 line-height: 14*2upx;
        }

        .azm-bg-center {
            height: 100%;

            .azm-bgc-box {
                position: relative;
                min-width: 1*2upx;
                height: 14*2upx;
                border-radius: 0 3*2upx 3*2upx 0;
				 line-height:14*2upx;
            }

            .azm-bgc-txt {
                position: absolute;
                top: 50%;
                right: -8*2upx;
                transform: translate(100%, -50%);
                color: #313131;
                font-weight: bold;
                font-size: 12*2upx;
            }
        }

        .azm-bg-right {
            width: 75*2upx;
        }
    }
</style>
